<template>
	<view class="page">
		<u-form :model="editForm" :rules="rules" labelWidth="auto" ref="uForm" labelPosition="top">
			<u-form-item label="请输入持卡人姓名" prop="name" borderBottom>
				<u-input v-model="editForm.name" border="none" :required="true" maxlength="10" input-align="left"
					font-size="28rpx" :placeholder-style="placeholderStyle" />
			</u-form-item>
			<u-form-item label="请输入卡号" prop="number" borderBottom>
				<u-input v-model="editForm.number" border="none" :required="true" maxlength="19" input-align="left"
					font-size="28rpx" :placeholder-style="placeholderStyle" />
			</u-form-item>

			<u-form-item label="请选择开户行" borderBottom @click="openSex">
				<u-input v-model="sexValue" disabled disabledColor="#ffffff" input-align="left" font-size="28rpx"
					:placeholder-style="placeholderStyle" border="none" />
				<u-icon slot="right" name="arrow-down" />
			</u-form-item>

			<u-form-item label="请填写开户行具体支行信息" prop="branch" borderBottom>
				<u-input v-model="editForm.branch" border="none" input-align="left" font-size="28rpx"
					:placeholder-style="placeholderStyle" />
				<!-- <u-icon slot="right" name="arrow-right" /> -->
			</u-form-item>
		</u-form>

		<view class="btn">
			<u-button type="primary" shape="circle" text="确定" :throttle-time="1000" @click="handleSubmit" />
		</view>

		<u-action-sheet :show="showSex" :actions="sexList" round="20" cancel-text="取消" @close="showSex = false"
			@select="sexSelect" />
	</view>
</template>

<script>
	import {
		addBank,commissionBank
	} from "@/request/myApi.js";
	export default {
		data() {
			return {
				editForm: {
					name: '',
					bank_id: '',
					number: '',
					branch: ""
				},
				rules: {
					name: {
						type: "string",
						required: true,
						message: "请填写姓名",
						trigger: ["blur", "change"],
					},
					number: {
						type: "number",
						required: true,
						message: "请正确输入卡号",
						trigger: ["blur", "change"],
						pattern: /^([1-9]{1})(\d{14}|\d{18})$/
					},
					branch: {
						type: "string",
						required: true,
						message: "请填写开户行具体支行信息",
						trigger: ["blur", "change"],
					},
				},
				sexValue: "", // 
				showSex: false, // 性别弹窗
				sexList: [],
				placeholderStyle: {
					fontSize: "28rpx",
					color: "#D9D9D9",
				},
			};
		},
		onReady() {
			//兼容微信小程序，只能通过setRules方法设置。
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getType()
		},
		methods: {
			getType(){
				commissionBank().then((res) => {
					if (res.code == 200) {
						this.sexList = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				});
			},
			// 提交修改
			handleSubmit() {
				this.$refs.uForm.validate().then(() => {
					if (this.editForm.bank_id == '') {
						uni.showToast({
							title: '请选择开户行',
							icon: "none",
						});
						return
					}
					addBank(this.editForm).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
					});
				});
			},
			// 打开性别选择
			openSex() {
				this.showSex = true
				uni.hideKeyboard();
			},
			// 选择性别
			sexSelect(val) {
				this.editForm.bank_id = val.id;
				this.sexValue = val.name;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 38rpx;


		.btn {
			position: fixed;
			bottom: 100rpx;
			left: 30rpx;
			right: 30rpx;
		}

		/deep/ .u-button {
			background: #58B99D;
			border-color: transparent;
			border-radius: 20rpx;
		}

		/deep/ .u-form-item {
			margin-bottom: 20rpx;
		}

		/deep/ .u-form-item__body__right {
			color: #303133;
		}

		/deep/ .u-form-item__body {
			padding: 10rpx 0;

		}

		/deep/ .u-line {
			border-color: #D9D9D999;
		}
	}
</style>